<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" :title="dialogTitle" width="600px" @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" prop="country_code" :rules="rules">
            <el-form-item label="审核组名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="dialogForm.name" />
            </el-form-item>    
            <el-form-item label="审核规则" :label-width="formLabelWidth" prop="rule_id">
                <el-select v-model="dialogForm.rule_id" placeholder="请选择审核规则">
                  <el-option
                    v-for="item in rulesList"
                    :key="item.rule_id"
                    :label="item.name"
                    :value="item.rule_id"
                  ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审核层级" :label-width="formLabelWidth" prop="audit_level">
                <el-select v-model="dialogForm.audit_level" placeholder="请选择审核层级">
                  <el-option :key="1" label="第一级" :value="1">第一级</el-option>
                  <el-option :key="2" label="第二级" :value="2">第二级</el-option>
                  <el-option :key="3" label="第三级" :value="3">第三级</el-option>
                  <el-option :key="4" label="第四级" :value="4">第四级</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="层级说明" :label-width="formLabelWidth" prop="level_name">
                <el-input v-model="dialogForm.level_name" />
            </el-form-item>
            <el-form-item label="是否终审" :label-width="formLabelWidth" prop="is_finally">
                <el-radio-group v-model="dialogForm.is_finally">
                    <el-radio :key="1" :label="1" :value="1">是</el-radio>
                    <el-radio :key="0" :label="0" :value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="其他审核参数" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.audit_params" type="textarea" rows="3" />
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.remark" type="textarea" rows="3" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);
defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    dialogForm: {
        type: Object,
        default: {
            id: "",
            name: "",
            rule_id: "",
            audit_level: "",
            level_name: "",
            audit_params: "",
            is_finally: "",
            remark: ""
        }
    },
    btnLoading: {
        type: Boolean,
        default: false
    },
    dialogTitle: {
        type: String,
        default: ""
    },
    rulesList: { type: Array, default: [] },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "140px";
// 校验
const rules = {
    rule_id: [{ required: true, message: "请选择审核规则", trigger: "blur" }],
    name: [{ required: true, message: "请输入审核组名称", trigger: "blur" }],
    audit_level: [{ required: true, message: "请选择审核层级", trigger: "blur" }],
    is_finally: [{ required: true, message: "请选择是否终审", trigger: "blur" }],
};
// 提交
const submit = dialogForm => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                const param = Object.assign({}, {
                    id: dialogForm.id,
                    rule_id: dialogForm.rule_id,
                    name: dialogForm.name,
                    audit_level: dialogForm.audit_level,
                    level_name: dialogForm.level_name,
                    audit_params: dialogForm.audit_params,
                    is_finally: dialogForm.is_finally,
                    remark: dialogForm.remark
                });
                emits("submitForm", param);
            } catch (error) {
                return false;
            }
        })
        .catch(error => {
            return false;
        });
};
</script>
  